<template>
  <div class="contentCate">
    <el-card class="box-card" v-if="status === 'index'">
      <el-row>
        <el-input v-model="searchParams.id" clearable placeholder="请输入用户id" style="width:200px" size="mini"></el-input>
        <el-select v-model="searchParams.type" placeholder="类型" clearable :style="{ width: '150px' }" size="mini">
          <el-option v-for="item in typeData" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getData"
          v-if="has('loss/index')">搜索</el-button>
        <el-button type="success" icon="el-icon-search" size="mini" @click="lookLoss">查看亏损</el-button>
      </el-row>

      <template v-if="searchParams.type == 1">
        <el-row>
          今日充值：{{ data.total_recharge }} 昨日兑换价：{{
            data.exchange_amount
          }}
          今日账户余额：{{
            data.balance
          }}
          今日提现：{{
            data.tx
          }}
          总盈亏：{{ data.diff_amount }}
        </el-row>
      </template>
      <template v-else>
        <el-row>
          本周充值：{{ data.total_recharge }} 昨日兑换价：{{
            data.exchange_amount
          }}
          今日账户余额：{{
            data.balance
          }}
          本周提现：{{
            data.tx
          }}
          总盈亏：{{ data.diff_amount }}
        </el-row>
      </template>
      <el-table :data="data.data" style="width: 100%;" :header-cell-style="{ color: '#333' }" :row-key="getRowKey"
        :expand-row-keys="expands" @expand-change="handleExpandChange">
        <el-table-column type="expand" label="历史">
          <template slot-scope="props">
            <el-table :data="props.row.list.data" style="width: 100%;" :row-style="TableRowStyle" :show-header="false">
              <el-table-column prop="id" label="用户id" align="center"></el-table-column>
              <el-table-column prop="date_str" label="日期" align="center"></el-table-column>
              <el-table-column prop="shang_sd_total" :label="searchParams.type == 1 ? '昨日账号剩余' : '上周日账号剩余'"
                align="center"></el-table-column>
              <el-table-column prop="bx_wk_balance" label="未开盒子总价" align="center"></el-table-column>
              <el-table-column prop="recharge_amount" :label="searchParams.type == 1 ? '今日充值' : '本周充值'"
                align="center"></el-table-column>
              <el-table-column prop="sd_totals" :label="searchParams.type == 1 ? '今日赏袋待处理' : '本周赏袋待处理'"
                align="center"></el-table-column>
              <el-table-column prop="fd_num" label="未开福袋数量" align="center"></el-table-column>
              <el-table-column prop="bxg_total" label="保险箱" align="center"></el-table-column>
              <el-table-column prop="total_balance" label="账户余额" align="center"></el-table-column>

              <el-table-column prop="zs_total_amounts" :label="searchParams.type == 1 ? '今日赠送' : '本周赠送'"
                align="center"></el-table-column>

              <el-table-column prop="recovery_price" label="亏损" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.recovery_price >= 0" style="color:green">+{{
                    (scope.row.recovery_price).toFixed(2)
                    }}</span>
                  <span v-else style="color:red">{{
                    (scope.row.recovery_price).toFixed(2)
                    }}</span>
                </template>
              </el-table-column>


            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="用户id" align="center"></el-table-column>
        <el-table-column prop="date_str" label="日期" align="center"></el-table-column>
        <el-table-column prop="shang_sd_total" :label="searchParams.type == 1 ? '昨日账号剩余' : '上周日账号剩余'"
          align="center"></el-table-column>
        <el-table-column prop="bx_wk_balance" label="未开盒子总价" align="center"></el-table-column>
        <el-table-column prop="recharge_amount" :label="searchParams.type == 1 ? '今日充值' : '本周充值'"
          align="center"></el-table-column>
        <el-table-column prop="sd_totals" :label="searchParams.type == 1 ? '今日赏袋待处理' : '本周赏袋待处理'"
          align="center"></el-table-column>
        <el-table-column prop="fd_num" label="未开福袋数量" align="center"></el-table-column>
        <el-table-column prop="bxg_total" label="保险箱" align="center"></el-table-column>
        <el-table-column prop="total_balance" label="账户余额" align="center"></el-table-column>

        <el-table-column prop="zs_total_amounts" :label="searchParams.type == 1 ? '今日赠送' : '本周赠送'"
          align="center"></el-table-column>

        <el-table-column prop="recovery_price" label="亏损" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.recovery_price >= 0" style="color:green">+{{ (scope.row.recovery_price).toFixed(2)
            }}</span>
            <span v-else style="color:red">{{
              (scope.row.recovery_price).toFixed(2)
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background style="text-align:center;margin:20px 0;" :current-page="searchParams.page"
        :page-sizes="pageSizes" layout="total,prev, pager, next,sizes" :total="data.total" @size-change="changeSize"
        @current-change="changePage"></el-pagination>
    </el-card>


    <el-card v-else-if="status === 'loss'">
      <div slot="header" style="margin-bottom: 20px;">
        <el-page-header @back="status = 'index'" content="用户亏损补"></el-page-header>
        <el-input v-model="searchParams1.user_id" clearable placeholder="请输入用户id" style="width:200px"
          size="mini"></el-input>
        <el-select v-model="searchParams1.status" placeholder="类型" clearable :style="{ width: '150px' }" size="mini">
          <el-option v-for="item in kstypeData" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="srearch">搜索</el-button>
        <el-button type="info" icon="el-icon-search" size="mini" @click="reset">重置</el-button>
      </div>

      <el-table :data="ksList" style="width: 100%;" :header-cell-style="{ color: '#333' }">
        <el-table-column prop="id" label="序号" key="7">
        </el-table-column>
        <el-table-column prop="user_id" label="用户ID" key="7">
        </el-table-column>
        <el-table-column prop="recovery_price" label="亏损" key="3">
        </el-table-column>
        <el-table-column prop="status" label="是否发放" key="2">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0" style="color:green">未发放</span>
            <span v-else style="color:red">已发放</span>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否补发" key="2">
          <template slot-scope="scope">
            <span v-if="scope.row.is_send == 0" style="color:green">不补</span>
            <span v-else style="color:red">补</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="亏补金额" key="1">
          <template slot-scope="scope">
            <span v-if="(scope.row.amount * 1) <= 0" style="color:green">{{ scope.row.amount }}</span>
            <span v-else style="color:red">{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background style="text-align:center;margin:20px 0;" :current-page="searchParams1.page"
        :page-sizes="pageSizes" layout="total,prev, pager, next,sizes" :total="kstotal" @size-change="changeSize1"
        @current-change="changePage1"></el-pagination>
    </el-card>
  </div>
</template>

<script>
import api from "../../api/api.js";
export default {
  name: "contentCate",
  data() {
    return {
      status: "index", // 页面控制
      data: {
        data: [
          // list: {
          //   data: []
          // }
        ]

      }, // 表格列表
      table_loading: true, // 表格加载中
      loading: false, //全局加载中
      pageSizes: [10, 20, 50, 100, 200, 500, 800, 1000, 2000], // 每页条数默认10
      searchParams: {
        page: 1,
        limit: 10,
        type: 1,
        userId: ""
      },
      searchParams1: {
        user_id: '',
        status: '',
        limit: 10,
        page: 1,
      },
      typeData: [
        { id: 1, name: "日亏" },
        { id: 2, name: "周亏" },
      ],
      kstypeData: [
        { id: '', name: "全部" },
        { id: 0, name: "未发放" },
        { id: 1, name: "已发放" },
      ],
      activeValue: 1,
      inactiveValue: 0,
      expands: [], // 用于存储当前展开的行的key数组
      ksList: [],//亏损列表
      kstotal: '',//亏损总页数
    };
  },
  created() {
    this.getData();
  },

  methods: {
    TableRowStyle({ row, rowIndex }) {
      // 注意，这里返回的是一个对象
      let rowBackground = {};
      // if (row) {
      //   rowBackground.background = "#f0f9eb";
      //   return rowBackground;
      // }
    },
    getRowKey(row) {
      // 返回每行数据的唯一标识，通常是ID
      return row.id;
    },
    srearch() {
      this.lookLoss()
      console.log(this.searchParams1)
    },
    reset() {
      this.searchParams1.user_id = ''
      this.searchParams1.status = ''
      console.log(this.searchParams1)
      this.srearch()
    },
    handleExpandChange(row, expandedRows) {
      this.load();
      console.log('展开当前', row, expandedRows)
      // console.log(row, expandedRows)
      // this.box_id = row.id //卡片添加到的盲盒id
      // this.box_name = row.name //卡片添加到的盲盒name
      // 清空当前展开的行
      this.expands = [];
      // 如果当前有展开的行，则记录其key
      if (expandedRows.length > 0) {
        this.expands.push(row.id);
      }
      api.loss
        .detail({
          params: {
            type: row.type,
            id: row.id
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.table_loading = false;
            this.data.data.forEach(val => {
              if (val.id == row.id) {
                val.list = res.data.data
              }
            });
            this.unload();
          }
        })
        .catch(error => {
          console.log(error);
        });

    },
    // 查看亏损
    lookLoss() {
      this.ksList = []
      this.load();
      api.loss
        .loss({
          params: this.searchParams1
        })
        .then(res => {
          if (res.data.code == 200) {
            this.status = 'loss'
            this.ksList = res.data.data.data
            this.kstotal = res.data.data.total
            this.unload();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 加载中
    load() {
      this.loading = this.$loading({
        lock: true,
        text: "数据加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    // 取消加载
    unload() {
      this.loading.close();
    },
    changeStatus(e) {
      this.load();
      api.feedback
        .status(e.id, { status: e.status })
        .then(res => {
          this.unload();
          if (res.data.code === 200) {
            this.$message.success("保存成功");
            this.init();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 获取所有数据
    getData() {
      this.load();
      api.loss
        .List({ params: this.searchParams })
        .then(res => {
          if (res.data.code == 200) {
            this.table_loading = false;
            res.data.data.data.forEach((item) => {
              item.list = []
            })
            this.data = res.data.data;
            this.unload();
            // console.log(this.data)
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 重置搜索参数重新搜索
    // reset() {
    //   this.init();
    //   this.getData();
    // },
    // 初始化
    init() {
      this.searchParams.page = 1;
      this.searchParams.userId = "";
    },
    // 改变每页条数时
    changeSize(limit) {
      this.searchParams.limit = limit;
      this.getData();
    },
    // 改变当前页码时
    changePage(page) {
      this.searchParams.page = page;
      this.getData();
    },
    // 改变每页条数时
    changeSize1(limit) {
      this.searchParams1.limit = limit;
      this.lookLoss();
    },
    // 改变当前页码时
    changePage1(page) {
      this.searchParams1.page = page;
      this.lookLoss();
    }
  }
};
</script>

<style scoped lang="less">
.contentCate {
  margin: 0 auto;

  .search {
    margin: 0 auto 10px auto;
  }
}
</style>
